<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <title>课程-任务</title>

    <%@ include file="/common/commonLib.jsp" %>
    <link rel="stylesheet" type="text/css" href="<c:url value='/css/courseTaskIndex.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/css/common-main.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/wangEditor/dist/css/wangEditor.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/css/checkboxcss/inserthtml.com.radios.css'/>"/>
    <!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="<c:url value='/css/checkboxcss/ie8.css'/>" />
<![endif]-->

    <script src="<c:url value='/js/course-index.js'/>" type="text/javascript" charset="utf-8"></script>
    <script src="<c:url value='/js/taskCreat.js'/>" type="text/javascript" charset="utf-8"></script>


</head>
<body>
<div class="container-fluid main">
    <div class="row">
        <div class="col-md-12">
            <%@include file="/common/header.jsp" %>
        </div>
        <div class="col-md-12">
            <%@include file="common/courseHeader.jsp" %>
        </div>
        <div class="col-md-3">
            <%@include file="common/courseLeft.jsp" %>
        </div>
        <div class="col-md-9">
            <%@include file="common/courseNavbar.jsp" %>
        </div>
        <div class="col-md-9">
            <!-- 任务首页 -->
            <div class="task-index">
                <div class="row">
                    <div class="col-md-12" style="text-align:right;">
                        <input type="button" id="creat-new-task-btn" class="btn btn-primary" value="创建任务"
                               style="margin-right: 2rem;box-shadow: 3px 3px 3px #80b3e0;">
                    </div>
                </div>
                <div class="row">
                    <!--任务列表 -->
                    <div class="col-md-12">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th class="col1">
                                    <select onchange="search()" class="form-control" id="searchTaskType">
                                        <option selected="selected" value="ALL">全部</option>
                                        <option value="ASKINLESSON">课堂提问</option>
                                        <option value="TESTINLESSON">当堂测试</option>
                                        <option value="HOMEWORK">课后作业</option>
                                        <option value="LABTEST">实验任务</option>
                                        <option value="PERSONALTASK">个人任务</option>
                                    </select>
                                </th>
                                <th class="col2">任务名</th>
                                <th class="col3">创建时间</th>
                                <th class="col4">发布者</th>
                                <th class="col5">
                                    <select onchange="search()" class="form-control" id="searchIsQuote">
                                        <option value="ALL" selected="selected">全部</option>
                                        <option value="YES">已发布</option>
                                        <option value="NO">未发布</option>
                                    </select>
                                </th>
                            </tr>
                            </thead>
                            <tbody id="taskList">

                            </tbody>
                        </table>
                        <!-- 分页 -->
                        <div class="page-content">
                            <nav class="pagination" role="navigation">
                                <a class="last-page">
                                    <i class="fa fa-angle-left"></i>
                                </a>
                                <span class="page-number">......</span>
                                <a class="next-page">
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<!-- 任务创建 -->
<div class="row" id="create-new-task-layer" style="display:none;">
    <div class="col-md-1"></div>
    <div class="col-md-10 course-task-creat-css">
        <div class="row">
            <div class="col-md-3">
                <!--任务类型 -->
                <label for="">任务类型</label>
                <select class="form-control" onchange="selectTaskType()" id="addTaskType">
                    <option value="ASKINLESSON">课堂提问</option>
                    <option value="TESTINLESSON">当堂测试</option>
                    <option value="HOMEWORK">课后作业</option>
                    <option value="LABTEST">实验任务</option>
                    <option value="PERSONALTASK">个人任务</option>
                </select>
            </div>
            <div class="col-md-3">
                <!-- 任务名 -->
                <label for="">任务名称</label>
                <input type="text" class="form-control" name="title">
            </div>
            <div class="col-md-3">
                <!-- 任务满分 -->
                <label for="">任务满分</label>
                <input type="text" class="form-control" id="fullMark">
            </div>
            <div class="col-md-2">
                <!-- 题型 -->
                <label for="">是否为选择题</label>
                <br>
                <input id="yes" type="radio" value="true" name="isSelect" checked="true">是
                <input id="no" type="radio" value="false" name="isSelect">否

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <label for="">任务描述</label>
            </div>
            <div class="col-md-12">
                <div id="editor-task">

                </div>
            </div>
            <div class="col-md-12">
                <label for="">任务附件</label>
                <button type="button" class="btn btn-primary" onclick="$('#task-file').click();">选择文件</button>
            </div>
            <div class="col-md-12" style="display:none;">
                <input type="file" id="task-file" name="file" onchange="taskFileList()"/>
            </div>
            <div class="col-md-12">
                <ul id="task-file-list">

                </ul>
            </div>
        </div>

        <div id="option" class="col-md-6">
            <label style="font-size: 16px">答案选项</label>
            <button class="btn btn-primary" onclick="addOption()">添加选项</button>
            <table id="optionList">
            </table>
        </div>
        <div id="scoreItems" class="col-md-6" hidden="hidden">
            <label style="font-size: 16px">评分项</label>
            <button class="btn btn-primary" onclick="addScoreItems()">添加评分项</button>
            <table id="scoreItemList">
                <tr>
                    <td class="col-md-1"><label>编号</label></td>
                    <td class="col-md-7"><label>评分项</label></td>
                    <td class="col-md-2"><label>该项满分</label></td>
                </tr>

            </table>
        </div>
        <div class="col-md-6">
            <label style="font-size: 16px">设置课程目标权重</label>
            <div id="courseTarget-list">
            </div>
        </div>


        <div class="row">
            <div class="col-md-12" style="margin-top: 15px">
                <span style="color:#00b43c;font-weight:bolder;">添加答案</span>
                <input type="checkbox" id="checkbox"/><label for="checkbox"></label>
            </div>
        </div>

        <div class="row" id="editor-answer-box">
            <div class="col-md-12">
                <label for="">标准答案</label>
            </div>
            <div class="col-md-12">
                <div id="editor-answer">

                </div>
            </div>
            <div class="col-md-12">
                <label for="">标准答案附件</label>
            </div>
            <div class="col-md-12">
                <button type="button" class="btn btn-primary" onclick="$('#answer-file').click();">选择文件</button>
            </div>
            <div class="col-md-12" style="display:none;">
                <input type="file" id="answer-file" name="file" onchange="answerFileList()"/>
            </div>
            <div class="col-md-12">
                <ul id="answer-file-list">

                </ul>
            </div>
        </div>
        <div class="row" style="margin-top:2rem;margin-bottom:4rem;text-align:center;">
            <input type="button" id="task-creat-btn" class="btn btn-success" value="创建任务">
        </div>
    </div>
    <div class="col-md-1"></div>
</div>

<%@include file="/common/footer.jsp" %>

<script src="<c:url value='/wangEditor/dist/js/wangEditor.js'/>" type="text/javascript" charset="utf-8"></script>
</body>

<script>

    var data =${data};
    $(document).ready(function () {
        if (data.status != "success") {
            alert(data.message);
            return;
        }
        $("#task").css("color", "#00b43c");
        $("#editor-answer-box").hide();
        init();
        initAnswer();
        $("#checkbox").click(function () {
            if ($("#checkbox").is(":checked")) {
                $("#editor-answer-box").show();
            } else {
                $("#editor-answer-box").hide();
            }
        });

        fetchCourse(data.data.courseId);
        initTable(data.data);
        changeUrl(data.data.search.courseId);
        $("#yes").click(function () {
            $("#option").show();
            $("#scoreItems").hide();
        });
        $("#no").click(function () {
            $("#option").hide();
            $("#scoreItems").show();
        });

        $.ajax({
            type: "GET",
            url: CONTEXT_PATH + "courseTargets/" + courseId,
            success: function (data) {
                // console.log("data:" + JSON.stringify(data));
                if (data.code != 0) {
                    window.alert(data.msg);
                    return;
                }
                var courseTargets = data.data;
                if (courseTargets.length != 0) {
                    allCourseTarget(courseTargets);
                } else {
                    /////
                }
            },
            error: function () {

            }
        });

    })


    var getTaskType = function (type) {
        if (type == "ASKINLESSON") {
            return "课堂提问";
        } else if (type == "TESTINLESSON") {
            return "当堂测试";
        } else if (type == "HOMEWORK") {
            return "课后作业";
        } else if (type == "LABTEST") {
            return "实验任务";
        } else {
            return "个人任务";
        }
    }

    var initTable = function (data) {
        var taskList = $("#taskList");
        taskList.empty();
        if (data.list.length <= 0) {
            var s = "<tr><td colspan=\"5\"><li>无任务记录</li></td></tr>";
            taskList.append(s);
        } else {
            for (var i = 0; i < data.list.length; i++) {
                var item = data.list[i];

                var isQuote = "未发布";
                if (item.isQuote == "YES") {
                    isQuote = "已发布";
                } else {
                    isQuote = "未发布";
                }
                var task = "";
                task += ("<tr onclick=\"window.location.href='<c:url value='/task/detail?id="+item.id+"'/>'\">")
                task += ("<td class=\"col1\" title=\"" + getTaskType(item.type) + "\">" + getTaskType(item.type) + "</td>");
                task += ("<td class=\"col2\" title=\"" + item.title + "\">" + item.title + "</td>");
                task += ("<td class=\"col3\" title=\"" + item.createDate + "\">" + item.createDate + "</td>");
                task += ("<td class=\"col4\" title=\"" + item.createName + "\">" + item.createName + "</td>");
                task += ("<td class=\"col5\" title=\"" + isQuote + "\">" + isQuote + "</td>");

                task += ("</tr>");

                taskList.append(task);
            }
            ;
        }

        initPages(data.pageNo, data.allpages);
    }
    var search = function () {
        var taskType = $("#searchTaskType  option:selected").val();
        var isQuote = $("#searchIsQuote  option:selected").val();
        var json = {
            courseId: data.data.courseId,
            type: taskType,
            isQuote: isQuote,
        };
        if (isQuote == "ALL") {
            delete json.isQuote;
        }
        if (taskType == "ALL") {
            delete json.type;
        }
        taskList(json);
    }

    var initList = function () {
        var json = {
            courseId: data.data.courseId
        };
        taskList(json);
    }

    var taskList = function (json) {
        $.get(CONTEXT_PATH + "task/ajaxListData", {
            data: JSON.stringify(json)
        }, function (data) {
            if (data.status == "success") {
                initTable(data.data);
            } else {
                alert(data.message);
            }
        });
    }

    var addTask = function () {
        var courseId = data.data.courseId;
        var type = $("#addTaskType  option:selected").val();
        var title = $("input[name='title']").val();
        var fullMark = $("#fullMark").val();
        var isSelect = $("input[type='radio']:checked").val();
        var description = $("#editor-task").html();
        var standardAnswer = $("#editor-answer").html();

        var attachName = $("#task-file-list input[name='attachName']");
        var attachKey = $("#task-file-list input[name='attachKey']");
        var attachFiles = [];
        var contents = [];
        var scoreItems = [];


        for (var i = 0; i < attachName.length; i++) {
            var item = {
                name: attachName[i].value,
                url: attachKey[i].value
            };
            attachFiles.push(item);
        }

        var answerAttachName = $("#answer-file-list input[name='answerAttachName']");
        var answerAttachKey = $("#answer-file-list input[name='answerAttachKey']");
        var answerAttachFiles = [];


        for (var i = 0; i < answerAttachName.length; i++) {
            var item = {
                name: answerAttachName[i].value,
                url: answerAttachKey[i].value
            };
            answerAttachFiles.push(item);
        }

        if (isSelect == "true") {
            //选择题
            var elements = document.getElementsByClassName("option");
            for (var i = 0; i < elements.length; i++) {
                var td = elements[i].getElementsByTagName("td");
                var content = td[1].getElementsByTagName("input")[0].value;
                var item = {
                    num: String.fromCharCode(i + 65),
                    item: content
                }
                contents.push(item);
            }
        } else {
            //非选择题
            var elements = document.getElementsByClassName("scoreItem");
            for (var i = 0; i < elements.length; i++) {
                var td = elements[i].getElementsByTagName("td");
                var scoreItem = td[1].getElementsByTagName("input")[0].value;
                var weight = td[2].getElementsByTagName("input")[0].value;
                var item = {
                    scoreItem: scoreItem,
                    weight: weight
                }
                scoreItems.push(item);
            }

        }
        var courseTargetId = $("#courseTarget-list input[name='courseTargetId']");
        var courseTargetWeight = $("#courseTarget-list input[name='weight']");
        var courseTargets = [];
        for (var i = 0; i < courseTargetId.length; i++) {

            var item = {
                courseTargetId: courseTargetId[i].value,
                weight: parseFloat(courseTargetWeight[i].value)
            };
            courseTargets.push(item);
        }

        if (title == null || title == " " || title == "") {
            var date = new Date();
            title = getTaskType(type) + "-" + date.toLocaleDateString();
        }
        var json = {
            courseId: courseId,
            type: type,
            title: title,
            description: description,
            standardAnswer: standardAnswer,
            attachment: {
                files: attachFiles
            },
            answerAttachment: {
                files: answerAttachFiles
            },

            //新加
            fullMark: fullMark,
            isSelect: isSelect,
            content: contents,
            scoreItems: scoreItems,
            courseTargets: courseTargets
        };
        // console.log(json);
        TaskCreate(json);
    }

    var TaskCreate = function (json) {
        $.post(CONTEXT_PATH + "task/ajaxCreate", {
            data: JSON.stringify(json)
        }, function (data) {
            if (data.status == "success") {
                //window.location.reload();
                window.location.replace(CONTEXT_PATH + "task/detail?id=" + data.data.task.id);
            } else {
                alert(data.message);
            }
        });
    }
    //渲染界面
    var initPages = function (pageNo, allpages) {

        var lastPageObj = $(".last-page");
        var nextPageObj = $(".next-page");
        var pageNumberObj = $(".page-number");
        var lastPage = pageNo - 1;
        if (lastPage <= 0) {//设置disableed
            lastPage = 1;
        } else {
            $(".last-page").bind("click", {pageNo: lastPage}, getPage);
        }
        ;
        var nextPage = pageNo + 1;
        if (nextPage > allpages) {
            nextPage = allpages;
        } else {
            $(".next-page").bind("click", {pageNo: nextPage}, getPage);
        }

        /* 需要进一步改进上下这块 */
        if (allpages <= 1) {
            $(".page-content").hide();
        } else {
            pageNumberObj.text("第" + pageNo + "页/共" + allpages + "页");
            $(".page-content").show();
        }
    }

    var getPage = function (event) {
        var taskType = $("#searchTaskType  option:selected").val();
        var isQuote = $("#searchIsQuote  option:selected").val();
        var json = {
            courseId: data.data.courseId,
            type: taskType,
            isQuote: isQuote,
        };
        if (isQuote == "ALL") {
            delete json.isQuote;
        }
        if (taskType == "ALL") {
            delete json.type;
        }
        json.pageNo = event.data.pageNo;
        taskList(json);
    }

    function allCourseTarget(courseTargets) {

        // $("[class*='courseTarget']").remove();
        var list = $("#courseTarget-list");
        var str = "";

        for (var i = 0; i < courseTargets.length; i++) {

            str += ("<div>");
            str += ("<label style=\"display: inline-block;width:20%\">课程目标") + (i + 1) + ("</label>");
            str += ("<input type=\"text\" name=\"courseTargetId\" hidden=\"hidden\" value=\"") + courseTargets[i].id + ("\">");
            str += ("<label style=\"display: inline-block;width:20%\">权重：</label>");
            str += ("<input name=\"weight\" style=\"display: inline-block;width:40%\" class=\"form-control\">");
            str += ("</div>");

        }
        list.append(str);
    }

    function addOption() {
        var num = document.getElementsByClassName('option').length;
        num += 65;
        var optionNum = String.fromCharCode(num);
        var list = $("#optionList");
        var str = "";
        str += ("<tr class=\"option\">");
        str += ("<td class=\"col-md-2\"><label style=\"font-size:16px\">") + optionNum + ("</label></td>");
        str += ("<td class=\"col-md-8\"><input class=\"form-control\"></td>");
        str += ("</tr>");
        list.append(str);
    }

    function addScoreItems() {
        var list = $("#scoreItemList");
        var num = document.getElementsByClassName("scoreItem").length;
        var str = "";
        str += ("<tr class=\"scoreItem\">");
        str += ("<td class=\"col-md-1\"><label>")+ (num+1) +("</label></td>");
        str += ("<td class=\"col-md-7\"><input type=\"text\" class=\"form-control\" name=\"scoreItem\"></td>");
        str += ("<td class=\"col-md-2\"><input type=\"text\" class=\"form-control\" name=\"fullMark\"></td>");
        str += ("</tr>");
        list.append(str);

    }
</script>
</html>
